<template>
  <div id="VideoHome">
        <!-- 底部 -->
        <div class="footer">
            <!-- 网站信息 -->
            <div class="info">
                <div class="left">
                    <div class="ll">
                        <p><strong>关于网站</strong></p>
                        <p>安阳师范学院官方网站</p>
                        <p>学校地址：河南省安阳市弦歌大道436号</p>
                        <p>邮政编码：455000</p>
                    </div>
                    <div class="lr">
                        <p><strong>维护支持</strong></p>
                        <p>版权所有：安阳师范学院</p>
                        <p>管理维护：党委宣传部</p>
                        <p>技术支持：网络与教育技术中心</p>
                    </div>
                </div>
                <div class="right">
                    <div class="rl">
                        <img src="/static/images/weixin.jpg">
                        <p>安阳师院微信</p>
                    </div>
                    <div class="rr">
                        <img src="/static/images/weibo.png">
                        <p>安阳师院微博</p>
                    </div>
                </div>
            </div>
            <!-- 版权信息 -->
            <div class="copyright">
                <div class="left">
                    <img src="/static/images/gwb.png">
                    <p>Copyright ©   2018 安阳师范学院</p>
                </div>
                <div class="right">
                    <img src="/static/images/blue_error.png">
                    <p>豫ICP备10001656号-1</p>
                    <p>豫公网安备41050202000028号</p>
                </div>
            </div>
        </div>
        <button type="button" class="el-button el-button--default is-circle top" @click="goBack"><i class="el-icon-upload2"></i></button>
    </div>
</template>

<script>
export default {
    methods:{
        goBack(){
            $("html,body").animate({scrollTop:"0px"},500);
        },
    }
}
</script>

<style>
    /* 底部 */
    .footer{
        width: 100%;
        height: 380px;
    }
    /* 网站信息 */
    .info{
        position: relative;
        width: 100%;
        height: 280px;
        background-color: #F5F5F5;
    }
    .info .left{
        position: absolute;
        width: 70%;
        height: 90%;
        left: 0;
        top: 5%;
        border-right: 1px solid #999;
    }
    .info .left .ll,.info .left .lr{
        position: absolute;
        width: 30%;
        height: 200px;

        line-height: 35px;
        letter-spacing: 1px;
    }
    .info .left .ll{
        top: 40px;
        left: 15%;
    }
    .info .left .lr{
        top: 40px;
        right: 15%;
    }
    .info .right{
        position: absolute;
        width: 30%;
        height: 90%;
        right: 0;
        top: 5%;
    }
    .info .right .rl, .info .right .rr{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 80px;
        
        font-size: 15px;
        font-weight: bold;
        text-align: center;
        letter-spacing: 1px;
    }
    .info .right img{
        width: 70px;
        height: 70px;
        border: 1px soild #999;
    }
    .info .right .rl{
        left: 80px;
    }
    .info .right .rr{
        left: 220px;
    }

    /* 版权信息 */
    .copyright{
        position: absolute;
        width: 100%;
        height: 100px;
        background-color: #525252;
    }
    .copyright .left,.copyright .right{
        position: absolute;
        width: 20%;
        height: 100%;
        font-size: 15px;
        line-height: 25px;
        text-align: center;
        color: #fff;
    }
    .copyright .left img{
        width: 50px;
        height: 50px;
    }
    .copyright .right img{
        width: 40px;
        height: 40px;
    }
    .copyright .left{
        left: 30%;
        top: 10px;
    }
    .copyright .right{
        left: 50%;
        top: 5px;
    }

    /* 返回顶部 */
    .top{
        position: fixed;
        right: 20px;
        bottom: 25px;
    }
</style>